<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>血液信息</title>
    <link rel="shortcut icon" type="image/x-icon" href="/img/favicon.ico">
    <link rel="stylesheet" href="/element-theme/blue/index.css">
</head>

<body>
    <div class="data-manage-table">
        <template>
            <!--血液查询-->
            <el-form ref="form" :inline="true" style="padding:20px 20px 0 20px;">
                <el-form-item label="血液编号">
                    <el-input placeholder="请输入血液编号" v-model="searchBloodToConfirm.bloodId"></el-input>
                </el-form-item>
                <el-form-item label="血装编号条码">
                    <el-input placeholder="请输入血装编号条码" v-model="searchBloodToConfirm.barcode"></el-input>
                </el-form-item>
                <el-form-item label="拓展码">
                    <el-input placeholder="请输入血装编号条码" v-model="searchBloodToConfirm.extendCode"></el-input>
                </el-form-item>
                <el-form-item label="ABO血型">
                    <el-select v-model="searchBloodToConfirm.aboBloodType">
                        <el-option v-for="item in aboBloodType" :key="item.code" :label="item.name" :value="item.code">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="RH血型">
                    <el-select v-model="searchBloodToConfirm.rhBloodType">
                        <el-option v-for="item in rhBloodType" :key="item.code" :label="item.name" :value="item.code">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label=血液状态>
                    <el-select v-model="searchBloodToConfirm.state">
                        <el-option v-for="item in state" :key="item.code" :label="item.state" :value="item.code">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="失效日期">
                    <el-date-picker v-model="searchBloodToConfirm.failureTime" type="daterange" size="small" format="yyyy-MM-dd"
                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="clickSearchBloodInformation">搜索</el-button>
                    <el-button type="info" @click="emptySearch">重置</el-button>
                    <el-button type="" @click="exportExcel()">导出</el-button>
                </el-form-item>
            </el-form>
            
            <!--血液信息展示-->
            <el-table :data="bloodInformation" style="width: 100%" border
                :header-cell-style="{'text-align': 'center','background': '#eef1f6'}" highlight-current-row
                @current-change="" id="out-table">
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                
                <el-table-column prop="bloodId" label="血液编号" width="100" align="center">
                </el-table-column>

                <el-table-column prop="bloodComponent" label="血液成分" width="100" align="center">
                </el-table-column>

                <el-table-column prop="aboInfo" label="ABO血型" width="100" align="center">
                </el-table-column>

                <el-table-column prop="rhInfo" label="RH血型" width="100" align="center">
                </el-table-column>

                <el-table-column prop="stateInfo" label="状态" width="100" align="center">
                </el-table-column>

                <el-table-column label="采集时间" width="220" align="center">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{scope.row.collectTime}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="失效时间" width="220" align="center">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{scope.row.failureTime}}</span>
                    </template>
                </el-table-column>

                <el-table-column prop="bloodSourceInfo" label="来源" width="100" align="center">
                </el-table-column>

                <el-table-column prop="locationInfo" label="位置" width="100" align="center">
                </el-table-column>

                <el-table-column prop="bloodAmount" label="血液金额(元)" width="100" align="center">
                </el-table-column>

                <el-table-column prop="inboundAmount" label="入库金额(元)" width="100" align="center">
                </el-table-column>

                <el-table-column prop="barcode" label="血装编号条条码" width="100" align="center">
                </el-table-column>

                <el-table-column prop="extendCode" label="拓展码" width="100" align="center">
                </el-table-column>

                <el-table-column label="操作" min-width="100" align="center" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="outbound(scope.$index, scope.row)" :disabled="scope.row.stateInfo!='在库'">出库</el-button>
                    </template>
                </el-table-column>
            </el-table>
            
            <!-- 血液出库 -->
            <el-dialog title="血液出库" center :visible.sync="outVisible" width="720px" @close="cancel">
                <el-form ref="form" :model="selectBlood" label-width="120px" >
                    <el-row>
                        <el-row>
                            <el-col :span="11">
                                <el-form-item label="血液ID" prop="bloodId" >
                                    <el-input v-model="selectBlood.bloodId" readonly style="width:180px; float: right;"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11">
                                <el-form-item label="血液状态" prop="stateInfo" >
                                    <el-input v-model="selectBlood.stateInfo" readonly style="width:180px; float: right;"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-col :span="11">
                            <el-form-item label="ABO血型" prop="aboInfo" >
                                <el-input v-model="selectBlood.aboInfo" readonly style="width:180px; float: right;"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="RH血型" prop="rhInfo" >
                                <el-input v-model="selectBlood.rhInfo" readonly style="width:180px; float: right;"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="采集日期" prop="collectTime" >
                                <el-input v-model="selectBlood.collectTime" readonly style="width:180px; float: right;"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="失效日期" prop="failureTime" >
                                <el-input v-model="selectBlood.failureTime" readonly style="width:180px; float: right;"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="血液位置" prop="locationInfo" >
                                <el-input v-model="selectBlood.locationInfo" readonly style="width:180px; float: right;"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="血液来源" prop="bloodSourceInfo" >
                                <el-input v-model="selectBlood.bloodSourceInfo" readonly style="width:180px; float: right;"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="出库原因">
                                <el-select v-model="selectBlood.outboundReason">
                                    <el-option v-for="item in outboundReason" :key="item.code" :label="item.name" :value="item.code">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="出库地址">
                                <el-select v-model="selectBlood.outboundLocation">
                                    <el-option v-for="item in outboundLocation" :key="item.code" :label="item.name" :value="item.code">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="取血人" prop="bloodTaker" >
                                <el-input v-model="selectBlood.bloodTaker" style="width:180px; float: right;"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="取血人工号" prop="bloodTakerNumber" >
                                <el-input v-model="selectBlood.bloodTakerNumber" style="width:180px; float: right;"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="操作人" prop="username" >
                                <el-input v-model="user.username" readonly style="width:180px; float: right;"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="操作人工号" prop="jobnum" >
                                <el-input v-model="user.jobnum" readonly style="width:180px; float: right;"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <!-- 底部区域 -->
                <span slot="footer" class="dialog-footer">
                    <el-button @click="cancelOutBound">取 消</el-button>
                    <el-button type="primary" @click="confirmOutBound">确 定</el-button>
                </span>
            </el-dialog>
            
<!--            <el-pagination :page-size="pageSize" :total="total" :current-page.sync="current" layout="prev, pager, next, jumper"-->
<!--                class="pagination"  @current-change="handleCurrentChange" style="text-align: center; margin-top: 20px;" />-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="current"
                    :page-sizes="[1, 5, 10, 20]"
                    :page-size.sync="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    class="pagination"
                    style="text-align: center; margin-top: 20px;">
            </el-pagination>
        </template>
    </div>

    <script src="/plugins/vue-2.5.17/vue.js"></script>
    <script src="/plugins/element-2.4.5/index.js"></script>
    <script src="/icons/iconfont.js"></script>
    <script src="/js/axios.min.js"></script>

    <script>Vue.prototype.$ELEMENT = { size: 'medium' };</script>
    <script language="JavaScript" type="text/javascript">
        //Date原型上添加格式转换方法
        Date.prototype.format = function(fmt) {
            const o = {
                "M+": this.getMonth() + 1,                 //月份 
                "d+": this.getDate(),                    //日 
                "h+": this.getHours(),                   //小时 
                "m+": this.getMinutes(),                 //分 
                "s+": this.getSeconds(),                 //秒 
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
                "S": this.getMilliseconds()             //毫秒 
            };
            if(/(y+)/.test(fmt)) {
                fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
            }
            for(const k in o) {
                if(new RegExp("("+ k +")").test(fmt)){
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
                }
            }
            return fmt;
        }
    </script>
    <script>
        (function () {
            const vm = window.vm = new Vue({
                el: '.data-manage-table',
                data() {
                    return {
                        total: 0,   //总记录数
                        current: 1,     //当前页
                        pageSize: 5,      //每页记录数
                        pages: 0,       //总页数

                        modifyVisible: false,   //修改血液订单信息 弹出框显示
                        auditVisible: false,    //审批血液订单  弹出框显示
                        outVisible: false,
                        currentChanged: false,  //查询模式是否变化

                        user: {
                            "username": "",
                            "jobnum": "",
                        },
                        
                        //血液类型选择
                        bloodType: [
                            {
                                label: '全血',
                                value: '全血'
                            },
                            {
                                label: '浓缩红细胞',
                                value: '浓缩红细胞'
                            },
                            {
                                label: '悬浮红细胞',
                                value: '悬浮红细胞'
                            },
                            {
                                label: '洗涤红细胞',
                                value: '洗涤红细胞'
                            },
                            {
                                label: '去白细胞红细胞',
                                value: '去白细胞红细胞'
                            },
                            {
                                label: '冰冻解冻去甘油红细胞',
                                value: '冰冻解冻去甘油红细胞'
                            },
                            {
                                label: '手工分离血小板',
                                value: '手工分离血小板'
                            },
                            {
                                label: '新鲜冰冻血浆',
                                value: '新鲜冰冻血浆'
                            },
                            {
                                label: '普通冰冻血浆',
                                value: '普通冰冻血浆'
                            },
                            {
                                label: '机采血浆',
                                value: '机采血浆'
                            },
                            {
                                label: '冷沉淀凝血因子',
                                value: '冷沉淀凝血因子'
                            },
                            {
                                label: '机采血小板',
                                value: '机采血小板'
                            },
                            {
                                label: '机采粒细胞',
                                value: '机采粒细胞'
                            },
                            {
                                label: '机采外周血干细胞',
                                value: '机采外周血干细胞'
                            },
                            {
                                label: '血浆置换',
                                value: '血浆置换'
                            },{
                                label: '辐照血液',
                                value: '辐照血液'
                            },
                            {
                                label: '病毒灭活血液',
                                value: '病毒灭活血液'
                            },
                            {
                                label: '治疗性单采血液',
                                value: '治疗性单采血液'
                            }
                        ],
                        
                        //ABO血型
                        aboBloodType: [],
                        
                        //RH血型
                        rhBloodType: [],
                        
                        //血液状态选择
                        state: [],
                        
                        //出库原因选择
                        outboundReason: [
                            {
                                code: '失效',
                                name: '失效'
                            },
                            {
                                code: '调血',
                                name: '调血'
                            },
                        ],
                        
                        //出库地址
                        outboundLocation: [
                            {
                                code: '输血室',
                                name: '输血室'
                            },
                            {
                                code: '急诊室',
                                name: '急诊室'
                            },
                        ],

                        //血液位置
                        bloodLocation: [
                            {
                                label: '血站',
                                value: '血站'
                            },
                            {
                                label: '血库',
                                value: '血库'
                            },
                        ],
                        
                        //输入的查询条件，点击查询时赋值给searchBloodData
                        searchBloodToConfirm: {
                            bloodId: '',     //血液单号
                            barcode: '',    //血装编号条码
                            extendCode: '',     //拓展码
                            aboBloodType: '',    //ABO血型
                            rhBloodType: '',     //RH血型
                            state: '',      //血液状态
                            bloodSource: '',    //血液来源
                            bloodLocation: '',      //血液位置
                            failureTime: [],    //失效日期
                        },
                        
                        //搜索血液订单信息
                        searchBloodData: {
                            bloodId: '',     //血液单号
                            barcode: '',    //血装编号条码
                            extendCode: '',     //拓展码
                            aboBloodType: '',    //ABO血型
                            rhBloodType: '',     //RH血型
                            state: '',      //血液状态
                            bloodSource: '',    //血液来源
                            bloodLocation: '',      //血液位置
                            failureTime: [],    //失效日期
                        },
                        
                        //选中的血液信息
                        selectBlood: {},

                        //查询到的血液信息
                        bloodInformation: [],

                        modifyFormRules: {
                            bloodType: [{required: true, message: '请选择血液类型', trigger: 'blur'}],
                            bloodVolume:  [{required: true, message: '请输入血量', trigger: 'blur'}],
                        }
                    }
                },

                computed: {
                },

                watch: {
                },

                methods: {
                    //每页记录个数改变
                    handleSizeChange(val) {
                        this.current = 1
                        this.pageSize = val
                        this.searchBloodInformation()
                    },

                    //点击页码
                    handleCurrentChange: function (val) {
                        this.searchBloodInformation()
                    },
                    
                    //获取AboType和RhType
                    getInformation: function(val) {
                        //获取AboType
                        axios({
                            url: '/aboType/normal/query',
                            method: 'get',
                            params: {},
                        }).then(res => {
                            if (res.status == 200) {
                                this.aboBloodType = res.data
                            }
                        }).catch(err => {
                            
                        })

                        //获取RhType
                        axios({
                            url: '/rhType/normal/query',
                            method: 'get',
                            params: {},
                        }).then(res => {
                            if (res.status == 200) {
                                this.rhBloodType = res.data
                            }
                        }).catch(err => {
                        })

                        //获取血液State
                        axios({
                            url: '/state/normal/query',
                            method: 'get',
                            params: {},
                        }).then(res => {
                            if (res.status == 200) {
                                this.state = res.data
                            }
                        }).catch(err => {

                        })
                    },
                    
                    //点击查询按钮
                    clickSearchBloodInformation(){
                        this.current = 1
                        let failureTime = this.searchBloodToConfirm.failureTime
                        if (failureTime.length > 0) {
                            //日期格式转换
                            if(failureTime[0] instanceof Date)
                                this.searchBloodToConfirm.failureTime[0] = failureTime[0].format("yyyy-MM-dd")
                            if(failureTime[1] instanceof Date)
                                this.searchBloodToConfirm.failureTime[1] = failureTime[1].format("yyyy-MM-dd")
                        }
                        this.searchBloodData = JSON.parse(JSON.stringify(this.searchBloodToConfirm))
                        this.searchBloodInformation()
                    },

                    //根据查询条件查询血液订单
                    searchBloodInformation() {
                        //血液编号
                        let bloodId = this.searchBloodData.bloodId
                        //血装编号条码
                        let barcode = this.searchBloodData.barcode
                        //拓展码
                        let extendCode = this.searchBloodData.extendCode
                        //ABO血型
                        let aboBloodType = this.searchBloodData.aboBloodType
                        //RH血型
                        let rhBloodType = this.searchBloodData.rhBloodType
                        //血液状态
                        let state = this.searchBloodData.state
                        //血液来源
                        let bloodSource = this.searchBloodData.bloodSource
                        //血液位置
                        let bloodLocation = this.searchBloodData.bloodLocation
                        //日期范围
                        let failureTime = this.searchBloodData.failureTime
                        let startTime = failureTime[0]
                        let endTime = failureTime[1]

                        axios({
                            url: '/bloodInformation/normal/searchBloodInformation',
                            method: 'get',
                            params: {
                                bloodId: bloodId,
                                barcode: barcode,
                                extendCode: extendCode,
                                aboBloodType: aboBloodType,
                                rhBloodType: rhBloodType,
                                state: state,
                                bloodSource: bloodSource,
                                bloodLocation: bloodLocation,
                                startTime: startTime != null ? startTime : '',
                                endTime: endTime != null ? endTime : '',
                                currentPage: this.current,
                                pageSize: this.pageSize
                            },
                        }).then(res => {
                            if (res.status == '200') {
                                this.bloodInformation = res.data.data;
                                this.total = res.data.total;
                                this.pages = res.data.pages;
                            } else {
                                this.$notify({
                                    tile: '警告',
                                    message: '搜索出错',
                                    type: 'warning'
                                })
                            }
                        }).catch(err => {
                            this.$notify.error({
                                title: '错误',
                                message: '搜索失败',
                            })
                        })
                    },
                    
                    //清空搜索条件
                    emptySearch() {
                        for (const key in this.searchBloodData)
                            this.searchBloodData[key] = ""
                        for (const key in this.searchBloodToConfirm)
                            this.searchBloodToConfirm[key] = ""
                    },

                    //出库界面隐藏
                    cancel() {
                        this.outVisible = false
                    },

                    //取消出库
                    cancelOutBound() {
                        this.outVisible = false
                    },
                    
                    //确认出库
                    confirmOutBound() {
                        let id = this.selectBlood.id
                        let stateInfo = this.selectBlood.stateInfo
                        let outboundReason = this.selectBlood.outboundReason
                        let outboundLocation = this.selectBlood.outboundLocation
                        let bloodTaker = this.selectBlood.bloodTaker
                        let bloodTakerNumber = this.selectBlood.bloodTakerNumber
                        let operator = this.selectBlood.operator
                        let operatorNumber = this.selectBlood.operatorNumber
                        
                        axios({
                            url: '/bloodInformation/normal/outboundBlood',
                            method: 'post',
                            params: {
                                bloodInformation: JSON.stringify(this.selectBlood),
                                id: id,
                                stateInfo: stateInfo,
                                outboundReason: outboundReason,
                                outboundLocation: outboundLocation,
                                bloodTaker: bloodTaker,
                                bloodTakerNumber: bloodTakerNumber,
                                operator: operator,
                                operatorNumber: operatorNumber,
                            }
                        }).then(res => {
                            if (res.data.code == '200') {
                                this.outVisible = false
                                this.$notify({
                                    tile: '成功',
                                    message: '出库成功',
                                    type: 'success'
                                })
                                this.searchBloodInformation()
                            } else {
                                this.$notify({
                                    tile: '警告',
                                    message: '出库出错',
                                    type: 'warning'
                                })
                            }
                        }).catch(err => {
                            this.$notify.error({
                                title: '错误',
                                message: '出库失败',
                            })
                        })
                    },
                    
                    //点击出库按钮
                    outbound(index, row) {
                        this.outVisible = true
                        // console.log(row)
                        //选中的血液  深拷贝
                        this.selectBlood = JSON.parse(JSON.stringify(this.bloodInformation[index]))
                        this.selectBlood.operator = "张三（暂定）"
                        this.selectBlood.operatorNumber = "111（暂定）"
                    },

                    //新增血液信息检查
                    verifyAddBlood(newSample){
                       
                    },
                    
                    //导出excel
                    exportExcel () {
                        //血液编号
                        let bloodId = this.searchBloodData.bloodId
                        //血装编号条码
                        let barcode = this.searchBloodData.barcode
                        //拓展码
                        let extendCode = this.searchBloodData.extendCode
                        //ABO血型
                        let aboBloodType = this.searchBloodData.aboBloodType
                        //RH血型
                        let rhBloodType = this.searchBloodData.rhBloodType
                        //血液状态
                        let state = this.searchBloodData.state
                        //血液来源
                        let bloodSource = this.searchBloodData.bloodSource
                        //血液位置
                        let bloodLocation = this.searchBloodData.bloodLocation
                        //日期范围
                        let failureTime = this.searchBloodData.failureTime
                        //日期格式转换
                        if (failureTime.length > 0) {
                            //日期格式转换
                            if(failureTime[0] instanceof Date)
                                failureTime[0] = failureTime[0].format("yyyy-MM-dd")
                            if(failureTime[1] instanceof Date)
                                failureTime[1] = failureTime[1].format("yyyy-MM-dd")
                        }
                        let startTime = failureTime[0] != null ? failureTime[0] : ''
                        let endTime = failureTime[1] != null ? failureTime[1] : ''
                        //创建a标签元素
                        const a = document.createElement('a')
                        a.href = 'http://localhost:8080/bloodInformation/normal/downloadExcel?' + 'bloodId=' + bloodId + '&barcode=' + barcode + '&aboBloodType=' + aboBloodType + '&rhBloodType=' + rhBloodType + '&extendCode=' + extendCode + '&state=' + state + '&bloodSource=' + bloodSource + '&bloodLocation=' + bloodLocation + '&startTime=' + startTime +  '&endTime=' + endTime
                        a.click()
                    }
                },

                mounted() {
                    this.searchBloodInformation();
                    this.getInformation();
                    //获取员工数据
                    this.user = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {};
                }
            });    
        })()
    </script>

</body>

</html>